Ext.define('scribbles.ArticlePanelWidget',{
	extend: 'Ext.form.Panel',
	alias: 'widget.ArticlePanelWidget',
	autoShow: true, 
	store: new Ext.data.Store({
		model: 'Article', 
		proxy: {
			type: 'ajax', 
			reader: {
				type: 'json', 
				root: 'article'
			}
		}
	}), 
	height: 600,
	layout: 'anchor', 
	items: [
		{
			xtype: 'displayfield', 
			name: 'name', 
			anchor: '100%'
		}, {
			xtype: 'displayfield', 
			name: 'articleContent', 
			anchor: '100%'
		}	
	], 
    loadArticle : function(articleId) {
    	alert('loading article' + articleId);
    	this.store.proxy.url = 'article/loadArticle/' + articleId + '.json';
    	this.store.load({
    	    scope   : this,
    	    callback: function(records, operation, success) {
				var articleModel = this.store.getAt(0).data;
				this.getForm().findField("name").setValue(articleModel.name);
				this.getForm().findField("articleContent").setValue(articleModel.articleContent);				
    	    }
    	});
    }
});